<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="listQuery.type"
        placeholder="反馈类型"
        class="filter-item"
        style="width: 130px"
        @keyup.enter.native="handleFilter">
        <!-- 反馈类型下拉选项 -->
        <el-option
          v-for="item in typeOptions"
          :key="item.key"
          :label="item.display_name"
          :value="item.key"
        ></el-option>
      </el-select>
      <el-input
        v-model="listQuery.content"
        placeholder="内容"
        class="filter-item"
        style="width: 160px"
        clearable
        @keyup.enter.native="handleFilter"
      ></el-input>
      <el-date-picker
        v-model="listQuery.createTimeStart"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="开始日期"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      ></el-date-picker>
      <el-date-picker
        v-model="listQuery.createTimeEnd"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="结束日期"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      ></el-date-picker>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <div class="importAndExport" style="float: right">
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-upload2"
          @click="dialogVisible=true"
        >导入</el-button>
        <el-button
          :loading="downloadLoading"
          class="filter-item"
          type="primary"
          icon="el-icon-download"
          @click="handleDownload">导出</el-button>
      </div>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      title="数据导入"
      width="30%">
      <el-form>
        <el-form-item label="请选择Excel文件">
          <el-upload
            :auto-upload="true"
            :multiple="false"
            :limit="1"
            :on-exceed="fileUploadExceed"
            :on-success="fileUploadSuccess"
            :on-error="fileUploadError"
            :action="importUrl"
            name="file"
            accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
      </div>
    </el-dialog>

    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;">
      <el-table-column label="编号" prop="id" align="center" min-width="96px">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="反馈类型" prop="type" width="79px" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.type | statusFilter">{{ scope.row.type | typeFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="内容" prop="content" width="630px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系类型" prop="contactWay" align="center" width="79px">
        <template slot-scope="scope">
          <el-tag :type="scope.row.contactWay | contactWayFilter">{{ scope.row.contactWay | contactWayTypeFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="联系号码" prop="contactNo" align="center" min-width="50px">
        <template slot-scope="scope">
          <span>{{ scope.row.contactNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" prop="createTime" min-width="43px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="36px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList"/>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import {fetchList, delFeedBack} from '@/api/feedback'
import Pagination from '@/components/Pagination'

const typeOptions=[
  {key: 0, display_name: '全部'},
  {key: 1, display_name: '问题'},
  {key: 2, display_name: '建议'},
  {key: 3, display_name: '其他'},
]

const contactWayOptions=[
  {key: 1, display_name: 'QQ'},
  {key: 2, display_name: '微信'},
  {key: 3, display_name: '其他'},
]

const statusTypeKeyValue = typeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

const contactWayTypeKeyValue = contactWayOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

export default {
  name: 'feedback',
  components: {
    Pagination
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'danger',
        2: 'success',
        3: 'warning'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      return statusTypeKeyValue[type]
    },
    contactWayFilter() {
      const contactWayStatusMap = {
        1: 'info'
      }
      return contactWayStatusMap[0]
    },
    contactWayTypeFilter(type) {
      return contactWayTypeKeyValue[type]
    },
    parseTime(time, cFormat) {
      return parseTime(time, cFormat)
    }
  },
  data() {
    return {
      typeOptions,
      tableKey: 0,
      list: null,
      listLoading: true,
      total: 0,
      downloadLoading: false,
      dialogVisible: false,
      listQuery: {
        page: 1,
        limit: 10,
        id: undefined,
        type: undefined,
        content: null,
        createTime: [],
        createTimeStart: undefined,
        createTimeEnd: undefined
      },
      importUrl: ''
    }
  },
  created () {
    this.getList()
    if (process.env.NODE_ENV === "development") {
      this.importUrl = process.env.BASE_API + "/feedback/import"
    } else {
      this.importUrl = "http://49.234.149:80/feedback/import"
    }
  },
  methods: {
    getList() {
      this.listLoading=true
      fetchList(this.listQuery).then(response => {
        if (response.data.code === 20000) {
          this.list = response.data.data.items
          this.total = response.data.data.total
        } else {
          this.$message({
            message: response.data.message,
            type: 'error'
          })
        }
        this.listLoading=false
      })
    },
    handleFilter () {
      this.listQuery.page = 1
      this.getList()
    },
    handleDownload() {
      this.downloadLoading=true
      import('@/utils/Export2Excel').then(excel => {
        const tHeader = ['编号', '反馈类型', '内容', '联系类型', '联系号码', '提交时间']
        const filterVal = ['id', 'type', 'content', 'contactWay', 'contactNo', 'createTime']
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '意见反馈信息'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'createTime') {
          return parseTime(v[j])
        } else if (j === 'type') {
          return typeOptions[v[j]].display_name
        } else if (j === 'contactWay') {
          return contactWayOptions[v[j] - 1].display_name
        } else {
          return v[j]
        }
      }))
    },
    fileUploadExceed() {
      this.$message.warning('只能选择一个文件')
    },
    fileUploadSuccess(response) {
      if (response.code === 20000) {
        this.$message.success('数据导入成功！')
        this.dialogVisible = false
        this.handleFilter()
      } else {
        this.$message.error(response.message)
        this.dialogVisible = false
      }
    },
    fileUploadError() {
      this.$message.error('数据导入失败！')
    }
  }
}
</script>
